<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">我的课堂</text>
				<text class="bg-green" style="width: 66vw;"></text>
				<text @click.native="toScanPage()" class="lg  cuIcon-scan"></text>
			</view>
		</view>
		<!-- 头部标题 end -->


		<!-- 没有加入课堂现实内容 -->
		<view class="" v-if="class_status">
			<view class="" style="display: flex;justify-content: center;margin-top:10vh;">
				<image style="width: 300upx;height: 300upx;" src="../../static/logo.png"></image>
			</view>

			<text style="display: flex;justify-content: center;margin-top: 2vh;font-weight: 600;">
				还没已加入的班级，快去加入一个把~~
			</text>

			<text style="display: flex;justify-content: center;margin-top: 1vh;color: #888888;">
				计入班课后可以随时随地学习资源、参加活动
			</text>

			<view class="padding flex flex-direction">
				<button @click.native="toScanPage()" class="cu-btn bg-green margin-tb-sm lg">加入班级</button>
			</view>

		</view>
		<!-- end -->

		<!-- 加入的课程 -->

		<view v-if="!class_status" class="" v-for="(item,index) in listData" :key="index">

			<view class="bg-white padding" style="display: flex;flex-wrap: wrap;" @click.native="toClassDescPage(item)">

				<view class="" style="display: flex;">
					<view class="">
						<image src="../../static/logo.png" style="height: 150upx;width: 150upx;" mode=""></image>
					</view>

					<view class="" style="margin-left: 10upx;">

						<view class="" style="display: flex;align-items: center;">

							<view class="" style="width:65vw;height: 100upx;display: flex;flex-direction: column;margin-left: 10upx;">
								<text class="text-cut" style="font-weight: 600;">{{item.clazzName}}</text>
								<view class="" style="margin-top: 20upx;">
									<text style="margin-top: 10upx;font-size: 25upx;">{{item.tname}}</text>
									<text class="text-cut " style="margin-top: 10upx;font-size: 25upx;margin-left: 20upx; ">{{item.banji}}</text>
								</view>
							</view>

							<view class="">
								<text class="lg text-gray cuIcon-right"></text>
							</view>

						</view>
						<view class="" style="display: flex;justify-content: space-between;width:72vw;padding: 5upx;margin-top: 10upx;">

							<view class="" style="display: flex;align-items: center;">
								<text class="lg text-gray cuIcon-appreciate"></text>
								<text style="font-size: 20upx;margin-left: 10upx;font-weight: 550;">签到</text>
							</view>


							<view class="" style="display: flex;align-items: center;margin-right: 10upx;">
								<text class="lg text-gray cuIcon-appreciate"></text>
								<text style="font-size: 20upx;margin-left: 10upx;font-weight: 550;">作业</text>
							</view>

							<view class="" style="display: flex;align-items: center;margin-right: 10upx;">
								<text class="lg text-gray cuIcon-appreciate"></text>
								<text style="font-size: 20upx;margin-left: 10upx;font-weight: 550;">抢答</text>
							</view>
						</view>


					</view>

				</view>

			</view>
			<view class="" style="height: 10upx ; width: 100%;"></view>
		</view>


		<!--加入的课程 end -->


	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				class_status: false, //是否已有加入的课程
				codeData: '', //二维码扫描结果 {"clazzId":"1","clazz":"java开发","tname":"董先生","banji":"软件开发"}
				listData:[],//列表数据
				
			}
		},
		onLoad() {
			let _this = this;
				this.$eventHub.$off("scanResult");//解绑$on 事件防止多次调用
				_this.$eventHub.$on("scanResult", function(data) {
					_this.codeData = data.result;
					uni.showLoading({
						title:"加入课堂中,请稍后..."
					})
					var code = _this.codeData;
					// 转换为对象
					var codeJSon = JSON.parse(code);
					var clazzId = codeJSon.clazzId;
					var clazz = codeJSon.clazz;//课堂名称
					var tname = codeJSon.tname;
					var banji = codeJSon.banji;
					console.log(clazz);
					
					// 发送请求加入课堂
					uni.request({
						url:_this.api + "join/clazz",
						method:"POST",
						data:{
							uid:uni.getStorageSync("user_info").id,
							clazzId:clazzId,
							clazzName:clazz,
							idcard:uni.getStorageSync("user_info").idcard,
							studentName:uni.getStorageSync("user_info").userName,
							tname:tname,
							banji:banji,
						},
						header:{
							"content-type": "application/x-www-form-urlencoded"
						},
						success: (res) => {
							_this.getData();
							uni.hideLoading();
							if(res.data.code == 200){
								uni.showToast({
									title:"加入课堂成功",
									icon:"success",
									duration:2000,
								})	
							}else{
								uni.showToast({
									title:"你已加入次课堂！",
									icon:"none",
									duration:2000,
								})
							}
							return;
							console.log(res);
							
						},
						fail: (err) => {
							console.log(err)
							uni.hideLoading();
							uni.showToast({
								title:"网络异常！请稍后在试~~",
								icon:"none",
								duration:2000,
							})
						}
					})
				});
		
			_this.getData();
			
		},
		onShow() {
			
		},
		onHide() {
			this.codeData = "code";
		},
		methods: {
			
			getData() {
				console.log("getData");
				var _this = this;
				var id = uni.getStorageSync('user_info').id
				uni.request({
					url: _this.api + "clazz/getStudentClazz", //获取加入课堂列表
					method: "POST",
					data: {
						uid: uni.getStorageSync("user_info").id
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.code == "200") {
							console.log(res)
							_this.listData = res.data.data;
							// $forceUpdate();
							
							if(_this.listData.length == 0 || _this.listData == null){
								_this.class_status = true;
							}else{
								_this.class_status = false;
							}
						}

					},
					fail: (err) => {
						uni.showToast({
							title: "查询失败请稍后在试！",
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			toClassDescPage: function(item) {
				uni.navigateTo({
					url: '/pages/classDesc/classDesc?id='+item.clazzId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 打开自定义二维码扫描
			toScanPage: function() {
				uni.navigateTo({
					url: '/pages/scan/scan',
				});
			}

		}
	}
</script>

<style>


</style>
